{% extends 'IcsocUIBundle::page.html.twig' %}
{% from 'IcsocUIBundle:Macro:actions.html.twig' import button %}

{% block stylesheet %}
    {{ parent() }}
    {% stylesheets
    '@jquery_ui_css'
    '@gritter_css'
    filter='cssrewrite' filter='uglifycss'
    %}
    <link rel="stylesheet" href="{{ asset_url }}" />
    {% endstylesheets %}
{% endblock %}

{% block content %}
    <div class="col-xs-12 col-sm-12 widget-container-col">
        <!-- #section:custom/widget-box -->
        <div class="widget-box" style="opacity: 1;">
            <div class="widget-header widget-header-small">
                <h5 class="widget-title">用户级别</h5>
                <!-- /section:custom/widget-box.toolbar -->
                <div class="widget-toolbar">
                    <a data-action="collapse" href="#">
                        <i class="ace-icon fa fa-chevron-up"></i>
                    </a>
                </div>
            </div>
            <div class="widget-body">
                <div class="widget-main">
                    {% for key, value in userGrade %}
                    <button class="btn btn-lg btn-success">
                        <i class="ace-icon fa fa-check"></i>
                        {{ value }}
                    </button>
                    {% endfor %}
                </div>
            </div>
        </div>
        <!-- /section:custom/widget-box -->
    </div>
    <div id="widgetTab" class="col-xs-12 col-sm-12 widget-container-col">
        <!-- #section:custom/widget-box -->
        <div class="widget-box" style="opacity: 1;">
            <div class="widget-header widget-header-small">
                <h5 class="widget-title">报表指标配置</h5>
                <!-- /section:custom/widget-box.toolbar -->
                <div class="widget-toolbar">
                    <a data-action="collapse" href="#">
                        <i class="ace-icon fa fa-chevron-up"></i>
                    </a>
                </div>
            </div>

            <div class="widget-body">
                <div class="widget-main">
                    <!-- #section:elements.tab.option -->
                    <div class="tabbable">
                        <ul class="nav nav-tabs" id="myTab">
                            {% for item, itemValue in reportItems %}
                            <li {% if loop.first == true %} } class="active" {% endif %}>
                                <a data-toggle="tab" href="#{{ item }}">{{ item }}</a>
                            </li>
                            {% endfor %}
                        </ul>

                        <div class="tab-content">
                            <h5 class="header green">数据报表</h5>
                            <h5 class="header green">自定义报表</h5>
                            {% for item, itemValue in reportItems %}
                            <div id="{{ item }}" {% if loop.first == true %} } class="tab-pane in active" {% else %} class="tab-pane in" {% endif %}">
                                {% for key, itemVal in itemValue %}
                                 <div class="col-lg-2 col-sm-3 col-xs-6">
                                    <label>
                                        <input type="checkbox" id="{{ key }}" name="{{ item }}[]" class="ace" value="{{ key }}"/>
                                        <span class="lbl"> {{ itemVal.text|trans }}</span>
                                    </label>
                                 </div>
                                 {% endfor %}
                            </div>
                            {% endfor %}
                        </div>
                    </div>
                    <!-- /section:elements.tab.option -->
                </div>
                <div class="widget-main">
                    <div class="clearfix well well-sm" style="margin-top: 15px">
                        <div class="col-sm-offset-3 col-sm-9 col-md-offset-4 col-md-8">
                            {{ button('Check All', 'check-all', 'fa-check-square', 'btn-success') }}
                            {{ button('Check None', 'check-none', 'fa-square', 'btn-success') }}
                            {{ button('Save Config', 'save-report-config', 'fa-save', 'btn-info') }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- /section:custom/widget-box -->
    </div>
    <div id="widgetTab" class="col-xs-12 col-sm-12 widget-container-col">
        <!-- #section:custom/widget-box -->
        <div class="widget-box" style="opacity: 1;">
            <div class="widget-header widget-header-small">
                <h5 class="widget-title">报表指标计算项配置</h5>
                <!-- /section:custom/widget-box.toolbar -->
                <div class="widget-toolbar">
                    <a data-action="collapse" href="#">
                        <i class="ace-icon fa fa-chevron-up"></i>
                    </a>
                </div>
            </div>

            <div class="widget-body">
                <div class="widget-main">
                    {% for item, itemValue in calculateItems %}
                    <div class="row" style="margin: 0px 10px 0px 10px">
                    <h4 class="header blue lighter smaller">{{ item }}</h4>
                    {% for key, itemVal in itemValue %}
                    <div class="col-lg-2 col-sm-3 col-xs-6">
                        <label>
                            <span class="lbl"> {{ itemVal.text|trans }}</span>
                        </label>
                        <a href="#" title="设置计算方式">
                            <i class="ace-icon fa fa-edit" data-report-type="{{ item }}" data-item="{{ key }}"></i>
                        </a>
                    </div>
                    {% endfor %}
                    </div>
                    {% endfor %}
                </div>
                <div class="widget-main">
                    <div class="clearfix well well-sm" style="margin-top: 15px">
                        <div class="col-sm-offset-3 col-sm-9 col-md-offset-4 col-md-8">
                            {{ button('Save Config', 'save-report-config', 'fa-save', 'btn-info') }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- /section:custom/widget-box -->
    </div>
    <div id="dialog-message" class="hide">
         <div class="row">
             <div class="control-group">
                 <lable>
                     指标名称：<input type="text">
                 </lable>
             </div>
         </div>
        <div class="row">
            <div class="control-group col-xs-12 col-sm-6" style="margin-top: 5px">
                <select class="item" style="margin-left: 45px;width: 170px" id="numerator-select"></select>
                <a href="#" data-action="collapse">
                    <i class="ace-icon fa fa-plus"></i>
                </a>
            </div>
        </div>
        <div class="row">
             <label class="control-label col-xs-12 col-sm-3">启用分母</label>
             <label>
                 <input type="checkbox" class="ace ace-switch" name="switch-field-1">
                 <span class="lbl"></span>
             </label>
         </div>
         <div class="row">
            <div class="control-group col-xs-12 col-sm-6">
                    <select class="item" style="margin-left: 45px;width: 170px" id="denominator-select"></select>
                    <a href="#" data-action="collapse">
                        <i class="ace-icon fa fa-plus" data-icon-show="fa-plus" data-icon-hide="fa-minus"></i>
                    </a>
            </div>
         </div>
    </div>
{% endblock %}

{% block javascript %}
    {{ parent() }}
    {% javascripts
    '@jquery_ui_js'
    '@gritter_js'
    '@common_js'
    '@bootbox_js'
    filter='uglifyjs'
    %}
    <script src="{{ asset_url }}"></script>
    {% endjavascripts %}
    <script type="application/javascript">
        var calculateItems = {"system":{},"queue":{},"agnet":{}};
        var report = null;
        var item = null;
        var options = '<option value="">请选择指标</option>';
        $(document).ready(function() {
            $('.ace-switch').on('click', function(){
                console.log($(this)[0]['checked']);
            })
            /** 设置计算方式 */
            $('.fa-edit').on('click', function(){
                report = $(this).attr('data-report-type');
                item = $(this).attr('data-item');
                calculateItems[report] = [];
                calculateItems[report][item] =  []
                {% for item, itemValue in reportItems %}
                if ("{{ item }}" == report) {
                    {% for key, itemV in itemValue %}
                    options += '<option value="{{ key }}">{{ itemV.text|trans }}</option>';
                    {% endfor %}
                }
                {% endfor %}
                $('#numerator-select').append(options);
                $('#denominator-select').append(options);
                var dialog = $( "#dialog-message" ).removeClass('hide').dialog({
                    modal: true,
                    title: "设置计算方式",
                    title_html: true,
                    width:600,
                    buttons: [
                        {
                            text: "Cancel",
                            "class" : "btn btn-xs",
                            click: function() {
                                $( this ).dialog( "close" );
                            }
                        },
                        {
                            text: "OK",
                            "class" : "btn btn-primary btn-xs",
                            click: function() {
                                calculateItems[report][item] = {};
                                var items = {"numerator":{"plus":[],"minus":[]},"denominator":{"plus":[],"minus":[]}};
                                $('#numerator-control').children('.control-group').each(function(index) {
                                    var logic = $(this).find('.logic').val();
                                    var value = $(this).find('.item').val();
                                    if (typeof value != 'undefined' && value != '') {

                                    }
                                    if (logic == 'minus') {
                                        items.numerator.minus[index] = value;
                                    } else {
                                        items.numerator.plus[index] = value;
                                    }
                                });
                                $('#denominator-control').children('.control-group').each(function(index) {
                                    var logic = $(this).find('.logic').val();
                                    var value = $(this).find('.item').val();
                                    if (logic == 'minus') {
                                        items.denominator.minus[index] = value;
                                    } else {
                                        items.denominator.plus[index] = value;
                                    }
                                });
                                calculateItems[report][item] = items;
                                console.log(calculateItems);
                                //$( this ).dialog( "close" );
                            }
                        }
                    ]
                });
            });

            /** 添加分子 */
            $('.fa-plus').on('click', function(){
                var $control = $(this).parent().parent().parent();
                if ($control.children().length > 5) {
                    alert('不能再继续添加');
                    return false;
                }

                var content = '<div class="control-group col-xs-12 col-sm-6" style="margin-top: 5px">\
                                   <select class="logic">\
                                        <option value="plus">+</option>\
                                        <option value="minus">-</option>\
                                   </select>\
                                   <select class="item" style="width: 170px">'+options+'</select>\
                                   <a href="#" data-action="close">\
                                       <i class="ace-icon fa fa-times"></i>\
                                   </a>\
                               </div>'
                $control.append(content);

                $('.fa-times').on('click', function(){
                    $(this).parent().parent().remove();
                });
            });

            $('.fa-times').on('click', function(){
                $(this).parent().parent().remove();
            });
        });
    </script>
{% endblock %}